<template>
  <div class="page">
    <div class="banner"></div>
    <div class="chains">
      <div class="item">
        <div class="info">
          <div class="icon"><img src="../assets/index/icon1.png" alt=""></div>
          <span>質押總計</span>
        </div>
        <div class="num">{{ poolForm.stakerNumber }}</div>
      </div>
      <div class="item">
        <div class="info">
          <div class="icon"><img src="../assets/index/icon2.png" alt=""></div>
          <span>總收入</span>
        </div>
        <div class="num">{{ poolForm.poolAPY }}</div>
      </div>
      <div class="item">
        <div class="info">
          <div class="icon"><img src="../assets/index/icon3.png" alt=""></div>
          <span style="display: inline-block;width: 100px;">預期年化收率</span>
        </div>
        <div class="num">{{ poolForm.poolAPY }}</div>
      </div>
      <div class="item">
        <div class="info">
          <div class="icon"><img src="../assets/index/icon5.png" alt=""></div>
          <span>池狀態</span>
        </div>
        <div class="num">{{ posStatus }}</div>
      </div>
      <div class="item1" style="width: 100%;">
        <div class="info1">
          <div class="icon"><img src="../assets/contribute/lock.png" alt=""></div>
          <span>PoS地址</span>
        </div>
        <div class="num1"><a
            href="https://testnet.confluxscan.net/pos/accounts/cfxtest:acacf3g9z6rav9ep5r3ez38ehsdvusa6xu6k4n88na?tab=overview">{{ viewPosAddress }}</a>
        </div>
      </div>
    </div>
    <div class="update">數據實時更新</div>
    <div class="pool">
      <div class="header">
        <div class="block-name">礦池</div>
        <div class="tips" @click="showTip">提示</div>
      </div>

      <div class="content">
        <div class="pledge">
          <div class="con">
            <div class="brand">質押中（CFX）1000</div>
            <input type="text" placeholder="請輸入CFX數量，1000的整數倍">
            <div class="opt-btns">
              <div class="state">
                <span class="num">餘額：9999</span>
                <span class="max">MAX</span>
              </div>
              <button>質押</button>
            </div>
          </div>
        </div>
        <div class="pledge">
          <div class="con">
            <div class="brand">可解除質押(CFX) 1000</div>
            <input type="text" placeholder="請輸入CFX數量，1000的整數倍" id="unlockNum" v-model="unlockNum">
            <div class="checkNumber" v-show="show">请输入1000的整数倍</div>
            <div class="opt-btns">
              <button>解除質押</button>
            </div>
          </div>
        </div>
        <div class="tq">
          <div class="text">
            解鎖中(CFX):<span>0</span> 可提取(CFX):<span>0</span>
          </div>
          <button class="op">提取</button>
        </div>
        <div class="tq">
          <div class="text">累計提取獎勵(CFX):<span>0</span>當前可提獎勵(CFX):<span>0</span></div>
          <button class="op">提取</button>
        </div>
      </div>
    </div>
    <div class="hr"></div>
    <div class="tz">
      <div class="block-name">特征</div>
      <div class="ll-item">
        <div class="no">1</div>
        <p>安全第一，我們永遠不會更改Conflux官方團隊的合約代碼，我們的KYC信息已經提供給Conflux基金會團隊；</p>
      </div>
      <div class="ll-item">
        <div class="no">2</div>
        <p>CFL礦池是完全自治的DAO組織，將不定期回饋用戶空投獎勵；</p>
      </div>
      <div class="ll-item">
        <div class="no">3</div>
        <p>無損質押獲得CFX+CFL雙倍收益，每質押1000CFX，獲得1個CFL空投。在CFX解鎖的時候，才能提取CFL。</p>
      </div>
    </div>
    <div class="hr"></div>
    <div class="rule">
      <div class="block-name">规则</div>
      <div class="ll-item">
        <div class="no">1</div>
        <p>質押/解除質押的 CFX 金額必須是 1000 的倍數；</p>
      </div>
      <div class="ll-item">
        <div class="no">2</div>
        <p>質押後至少需要等待14天才能解質押，解質押後至少需要等待1天才能提現；</p>
      </div>
      <div class="ll-item">
        <div class="no">3</div>
        <p>獎勵每小時更新一次；</p>
      </div>
      <div class="ll-item">
        <div class="no">4</div>
        <p>獎勵可隨時領取。</p>
      </div>
    </div>
    <div class="hr"></div>
    <div class="faq">
      <div class="block-name">CFL 礦池 FAQ</div>
      <div class="ll-item">
        <div class="no">1</div>
        <p>常见问题</p>
      </div>
    </div>
    <div class="hr"></div>
    <div class="join">
      <div style="text-align: left">
        <div class="block-name">加入社区</div>
      </div>
      <div class="links">
        <a href="" class="link">
          <img src="../assets/index/link1.png" alt="">
        </a>
        <a href="" class="link">
          <img src="../assets/index/link2.png" alt="">
        </a>
        <a href="" class="link">
          <img src="../assets/index/link3.png" alt="">
        </a>
        <a href="" class="link">
          <img src="../assets/index/link4.png" alt="">
        </a>
      </div>
    </div>
    <TipModal ref="tip"></TipModal>
  </div>
</template>

<script>
import cfxpool from '@/util/cfxpool';
import { mapGetters } from "vuex";
import TipModal from "@/components/TipModal.vue";
export default {
  name: "Index",
  components: {
    TipModal
  },
  computed: {
    ...mapGetters([
      'cfxToolInit',
    ])
  },
  data() {
    return {
      unlockNum:'',
      show:'false',
      unlockNum: '',
      posStatus: '',
      viewPosAddress: '',
      wallet: '',
      network: '',
      address: '',
      balance: '',
      poolForm: {
        poolAddr: '',
        poolName: '',
        bindAddrC2E: '0x0000000000000000000000000000000000000000',
        poolAPY: '',
        stakerNumber: '',
        posAddress: '',
        stakingVault: '',
        totalEarned: '',
      },
      userSummary: {
        votes: '',
        available: '',
        locked: '',
        unlocked: '',
        claimedInterest: '',
        currentInterest: '',
      },
    }
  },
  watch: {
    cfxToolInit(newVal) {
      console.log(newVal)
      if (newVal) {
        this.getPoolInfo()
      }
    }
  },
  mounted(){
    this.checkNum()
  },
  methods: {
    showTip() {
      console.log(this.$refs.tip)
      this.$refs.tip.open()
    },
    getPoolInfo() {
      if (!cfxpool.isCoreSpace()) {
        return
      }
      cfxpool.getPoolSummary().then(res => {
        this.poolForm.stakerNumber = res.available
      })
      cfxpool.getPoolApy().then(res => {
        this.poolForm.poolAPY = res
      })
      cfxpool.getPoolPosAddress().then(res => {
        console.log(res);
        this.poolForm.posAddress = res
        const head = res.slice(0, 6)
        const tail = res.slice(res.length - 4)
        const PosAddress = head + '....' + tail
        this.viewPosAddress = PosAddress
        this.posStatus = 'good'
      })
    },
    checkNum() {
      const ele = document.getElementById('unlockNum')
      ele.addEventListener('blur', function () {
        console.log(this.unlockNum);
        if (isNaN(this.unlockNum) || this.unlockNum % 1000 !== 0) {
          this.show=true
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.checkNumber {
  color: red;
  position: absolute;
  bottom: 0px;
  font-size: 8px;
  display: none;
}

.item1 {
  line-height: 31px;
  width: calc(50% - 2px);
  margin-bottom: 2px;
  background: #fff;
  display: flex;
  align-items: center;
  font-size: 12px;

  .info1 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #6E767D;
    width: 100px;
    margin-left: 8px;
    margin-right: 40px;

  }

  .num1 {
    width: 80px;
    font-size: 14px;
    font-weight: bold;
    line-height: 12px;
    text-align: center;
    color: #9C27B0;
    text-overflow: ellipsis;
  }

  &:nth-of-type(odd) {
    margin-right: 2px;
  }

  a {
    text-decoration: none;
  }
}

.banner {
  background: url('@/assets/index/banner.png') no-repeat center;
  background-size: cover;
}

.tz {
  text-align: left;
  width: 400px;
  background-image: url('@/assets/index/tz.png');
  background-repeat: no-repeat;
  background-color: #FFA000;
  background-size: 114px 105px;
  background-position: right 5px bottom 3px;
  box-sizing: border-box;
  padding: 8px 13px;
  border-radius: 6px;
}

.rule {
  text-align: left;
  width: 400px;
  box-sizing: border-box;
  padding: 8px 13px;
  border-radius: 6px;
  background-image: url('@/assets/index/rule.png');
  background-repeat: no-repeat;
  background-color: #FFA000;
  background-size: 136px 152px;
  background-position: right 13px bottom 11px;
}

.faq {
  width: 400px;
  background-image: url('@/assets/index/faq.png');
  background-repeat: no-repeat;
  background-color: #FFA000;
  background-size: 114px 114px;
  background-position: right 13px center;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 8px 13px;
  text-align: left;
}

.ll-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  color: #1E1E1E;

  p {
    text-align: left;
    font-size: 14px;
    font-weight: normal;
    line-height: 114%;
    letter-spacing: 0;
    max-width: 342px;
    flex-shrink: 0;
    color: #1E1E1E;

  }

  .no {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 38px;
    width: 38px;
    background: url('@/assets/nodes/no-bg.png') no-repeat center;
    background-size: cover;
    line-height: 38px;
    font-size: 14px;
    color: #fff;
  }

  margin-top: 13px;

  &:first-child {
    margin-top: 0;
  }
}


.chains {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
  border-radius: 6px;
  overflow: hidden;

  .item {
    line-height: 31px;
    flex-shrink: 0;
    width: calc(50% - 2px);
    margin-bottom: 2px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;

    .info {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #6E767D;
      width: 100px;
    }

    .num {
      width: 80px;
      font-size: 14px;
      font-weight: bold;
      line-height: 12px;
      text-align: center;
      color: #9C27B0;
      text-overflow: ellipsis;
    }

    &:nth-of-type(odd) {
      margin-right: 2px;
    }

  }

  .icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;

    img {
      display: block;
      max-width: 100%;
      max-height: 100%;
    }
  }
}

.update {
  height: 21px;
  opacity: 1;
  font-size: 10px;
  line-height: 21px;
  text-align: center;
  margin-top: 3px;
  width: 100%;
  color: #6E767D;
  padding-bottom: 4px;
  border-bottom: 1px solid #C98AD2;
}

.pool {
  margin-top: 14px;
  border-radius: 6px;
  background: linear-gradient(123deg, #FFA000 19%, #FFECB3 128%);
  padding: 8px 10px 17px;
  text-align: left;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .tips {
      cursor: pointer;
      color: #1E1E1E;
      font-size: 12px;
    }
  }

  .tq {
    font-size: 12px;
    padding: 13px 10px;
    background: #fff;
    height: 22px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 14px;

    .text {
      width: 240px;
      text-align: center;
      line-height: 22px;
      color: #6D757C;
      letter-spacing: 0;
      flex-shrink: 1;

      span {
        color: #FBAE19;
        font-weight: bold;
      }
    }

    .op {
      width: 114px;
      height: 21px;
      line-height: 21px;
      border-radius: 4px;
      opacity: 1;
      background: #9C27B0;
      color: #fff;
    }
  }

  .pledge {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;

    .con {
      width: 350px;
      background: #fff;
      height: 81px;
      box-sizing: border-box;
      padding: 18px 10px 21px 41px;
      border-radius: 6px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .brand {
        position: absolute;
        top: 7px;
        bottom: 0;
        width: 68px;
        height: 68px;
        border-radius: 6px;
        background: #E1BEE7;
        left: -34px;
        color: #9C27B0;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
      }

      input {
        width: 177px;
        height: 42px;
        border-radius: 4px;
        opacity: 1;
        background: #FFFFFF;
        box-sizing: border-box;
        border: 1px solid #E1BEE7;
        padding: 10px 5px;
        outline: none;
        font-size: 12px;
        line-height: 22px;
      }

      .opt-btns {
        button {
          width: 114px;
          height: 21px;
          border-radius: 4px;
          background: #9C27B0;
          font-size: 12px;
          color: #fff;
        }

        .state {
          font-size: 14px;
          font-weight: bold;
          line-height: 22px;
          text-align: center;
          color: #9C27B0;
        }

        .max {
          font-size: 14px;
          font-weight: 900;
          line-height: 22px;
          text-align: center;
          letter-spacing: 0px;
          color: #FA9D00;
          margin-left: 7px;
        }
      }
    }
  }
}

.join {
  padding: 8px 0 14px 13px;
  margin-top: 14px;
  background: #FFA000;
  border-radius: 6px;

  .links {
    margin-top: 14px;
    padding-left: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .link {
      margin-left: 40px;
      height: 40px;
      width: 40px;
      margin-top: 15px;

      img {
        display: block;
        max-width: 100%;
        max-height: 100%
      }
    }
  }
}</style>